<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_edit.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!-- 导航栏、左侧用户信息区域、右侧博客列表区域 -->
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="./image/logo.png" alt="logo">
        <!-- 标题 -->
        <span class="head">我的博客系统</span>
        <!-- 空白占位符 -->
        <span class="spacer">欢迎来到博客世界~</span>
        <!-- 右侧的几个连接 -->
        <a href="blog_list.html">首页</a>
        <a href="#" id="logout" class="logout">退出</a>
        <a href="blog_register.html">注册</a>
    </div>
    <!-- 博客编辑页的版心 -->
    <div class="blog-edit-container">
<!--        <form action="blog_edit" method="post" style="height: 100%;">-->
        <!-- 标题编辑区 -->
        <div class="title">
            <input type="text" id="title" name="title" placeholder="在这里写下文章标题">
            <input type="button" value="发布文章" id="submit">
        </div>
        <!-- markdown编辑器标签 -->
        <div id="editor">
            <!-- 这里加上一个隐藏的textarea，这个东西不需要显示，只是为了后面的表单提交构造数据 -->
            <textarea name="content" style="display: none;" id="content"></textarea>
        </div>
<!--        </form>-->
    </div>
    <script>
        let logoutD = document.querySelector(".logout");
        logoutD.onclick = function(){
            jQuery.getJSON("login/out",
            {},
            function(data){
                if(data.ok == 1){
                    alert("退出登录");
                    window.location.href = 'login.html'
                }
            })
        }

        var editor = editormd("editor",{
            width:"100%" ,
            height:"calc(100% - 50px)",
            markdown:"# 记录下最近的经历叭~",
            path:"editor.md/lib/",
            // 让editor里面的文本自动就存在textarea里面
            // 于是进一步的提交表单，就可以带上博客的正文了
            saveHTMLToTextArea:true
        });
        let button = document.querySelector("#submit");
        let title = document.querySelector("#title");
        let content = document.querySelector("#content");

        button.onclick = function(){
            let res = isRightText();
            if(res == true){
                jQuery.getJSON("edit/add" + location.search,
                {
                    "titled":jQuery.trim(title.value),
                    "contentd":jQuery.trim(content.value)
                },
                function(data){
                    if(data.status == 1){
                        alert(data.message);
                        window.location.href = 'blog_list.html';
                    }else {
                        alert(data.message);
                        //此处不跳转是为了保存用户当前的输入信息
                    }
                }
                )
            }
        }
        //校验文章内容是否符合要求
        function isRightText(){
            if(title.value == null || title.value == ""){
                alert("请先输入文章标题~");
                title.focus();
                return false;
            }
            if(content.value == null || content.value == ""){
                alert("请先输入文章内容~");
                return false;
            }
            return true;
        }
        //向服务器传递请求，校验是新增文章还是修改文章
        jQuery.getJSON("edit/isUpdate" + location.search,{},
        function(obj){
            if(obj.status == 1){
                alert("对文章进行修改~")
                fullBlog(obj.data);
            }else{
                //不做任何处理
            }
        })
        //根据响应填充页面
        function fullBlog(blog){
            title.value = blog.title;
            content.value = blog.content;
        }
    </script>
</body>
</html>